<template>
	<div class="chartmain" :style="props.style">
		<div ref="chartDom" class="chart" style="width: 100%; height: 100%" v-loading="isLoding"></div>
		<div class="ps-wrap">
			<div class="rank" @click="handelPank">分支领域排名</div>
		</div>
	</div>
	<Rank01 ref="Rank01Ref" :talentId="props.talentId"></Rank01>
</template>

<script setup lang="ts" name="barChartsC1">
import * as echarts from 'echarts';
import { getTalentCapacity } from '/@/api/cx/list';
const Rank01 = defineAsyncComponent(() => import('../components/Rank01.vue'));
const props = defineProps({
	// 数据
	data: {
		type: [Object, String],
	},
	talentId: {
		type: [Number, String],
	},
	// 样式
	style: {
		type: String,
		default: 'width: 100%;height: 400px;',
	},
});
const Rank01Ref = ref();
const chartDom = ref();
let myChart = null;
const isLoding = ref(false);
// 数据
const state = reactive<any>({
	xData: [],
	yData: [],
});
function mapInit() {
	myChart = echarts.init(chartDom.value);
	let option: any = {};
	if (state.xData.length > 0) {
		option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
			},
			xAxis: {
				type: 'value',
				axisLine: {
					// 轴线
					show: true,
					color: '#268C8C',
				},
			},
			yAxis: {
				type: 'category',
				data: state.xData,
				//name: '单位：年',
			},
			grid: {
				left: '20%',
				right: '10%',
			},
			dataZoom: [
				{
					type: 'inside',
					yAxisIndex: [0],
					start: 0,
					end: 100,
				},
			],
			series: [
				{
					name: '专利申请量',
					data: state.yData,
					type: 'bar',
					barMaxWidth: 40,
					itemStyle: {
						color: '#2A74AF',
					},
				},
			],
		};
	} else {
		option = {
			title: {
				text: '暂无数据',
				x: 'center',
				y: 'center',
				textStyle: {
					fontSize: 14,
					fontWeight: 'normal',
				},
			},
		};
	}

	option && myChart.setOption(option, true);
}
function handelPank() {
	Rank01Ref.value.open();
}
onMounted(() => {
	let param = {
		charts: 5,
		talentId: props.talentId,
	};
	isLoding.value = true;
	getTalentCapacity(param)
		.then((res) => {
			console.log('res.code', res);
			if (res.code == 0) {
				let xData: any = [];
				let yData: any = [];
				for (const item of res.data) {
					xData.push(item.name || 0);
					yData.push(item.value || '');
				}
				state.xData = xData;
				state.yData = yData;
				mapInit();
			}
		})
		.catch(() => {
			state.xData = [];
			state.yData = [];
			mapInit();
		})
		.finally(() => {
			isLoding.value = false;
		});
});
</script>

<style lang="scss" scoped>
.chart {
	height: 500px;
}
.chartmain {
	position: relative;
	.ps-wrap {
		position: absolute;
		right: 0;
		top: -20px;
		z-index: 10;
		display: flex;
		.rank {
			font-weight: 400;
			font-size: 14px;
			color: #333333;
			height: 29px;
			background: #ffffff;
			border-radius: 4px 4px 4px 4px;
			border: 1px solid #999999;
			padding: 0 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 30px;
			cursor: pointer;
		}
	}
}
</style>
